<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Station Device Application</title>
	<link href="/public/css/device.css?version=1" rel="stylesheet" type="text/css" />
	<link href="/public/lib/bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
	<link href="/public/lib/adminlte/js/adminlte.min.js" rel="stylesheet" type="text/css" />
	<link href="/public/lib/adminlte/css/adminlte.min.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="/ajax/libs/vue/2.7.10/vue.js"></script>
	<script src="/ajax/libs/axios/0.21.0/axios.min.js"></script>

	<script type="text/javascript" src="/ajax/libs/iview/3.5.0/iview.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/ajax/libs/iview/3.5.0/styles/iview.css">

	<link href="/public/lib/ionicons/3.0.0/css/ionicons.css" rel="stylesheet">
	<link href="/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
<div id="app" class="app-container">
	<div class="kc-menu-fixed">
		<i-menu mode="horizontal" ref="menu" class="kc-menu"  :active-name="activeMenu">
			<menu-item v-for="menu in menus"  :key="menu.name"  :name="menu.name" :to="menu.url" >
				<i :class="menu.icon"></i>
				{{menu.title}}
			</menu-item>
		</i-menu>
	</div>
	<section class="content">
		<div class="container-fluid">
			<div class="card" style="margin-top: 1rem">
				<div class="card-header">
					<h3 class="card-title"><i class="fas  fa-th-large"></i> {{ i18n["device.html.running_mode"]}}</h3>
					<div class="card-tools">
						<ul class="nav nav-pills ml-auto">
							<li class="nav-item">
								<a class="nav-link active" href="#revenue-chart" data-toggle="tab">{{ i18n["device.html.simulator"]}}</a>
							</li>
							<#--<li class="nav-item">
								<a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
							</li>-->
						</ul>
					</div>
				</div>
				<!-- /.card-header -->
				<!-- form start -->

				<div class="card-body">
					<div class="wrap-text">
						{{ i18n["device.html.camera_tips1"]}}
						<br/>
						{{ i18n["device.html.camera_tips2"]}}
					</div>
				</div>
			</div>
				<!-- /.card-body -->
			<!-- Horizontal Form -->
			<div class="card" style="margin-top: 1rem">
				<div class="card-header">
					<h3 class="card-title"><i class="fas  fa-th-large"></i> {{ i18n["device.html.camera"]}}</h3>
				</div>
				<!-- /.card-header -->
				<!-- form start -->

					<div class="card-body">
						<div class="form-group row">
							<div class="input-group col-sm-6" v-for="conn in this.properties.deviceCameraConnections">
								<table class="table table-bordered">
									<thead>
									<tr>
										<th style="width: 10%">{{ i18n["device.html.attribute"]}}</th>
										<th style="width: 15%">{{ i18n["device.html.value"]}}</th>
									</tr>
									</thead>
									<tbody>
									<tr >
										<td>{{ i18n["device.html.station_code"]}}</td>
										<td><input type="text" class="form-control" v-model="conn.station" readonly></td>
									</tr>
									<tbody>
									<tr >
										<td>{{ i18n["device.html.point"]}}</td>
										<td><input type="text" class="form-control" v-model="conn.point" readonly></td>
									</tr>
									<tr >
										<td>{{ i18n["device.html.ip"]}}</td>
										<td><input type="text" class="form-control" v-model="conn.ip" readonly></td>
									</tr>
									<tr >
										<td>{{ i18n["device.html.port"]}}</td>
										<td><input type="text" class="form-control" v-model="conn.port" readonly></td>
									</tr>
									</tbody>
								</table>

									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-envelope" style="margin-right: 1rem"></i> {{ i18n["device.html.camera_scanned"]}} </span>
										</div>
										<input type="text" class="form-control" v-model="conn.message">
										<span class="input-group-append">
											<button type="button" class="btn btn-outline-primary btn-flat" @click="mockReport(conn)">{{ i18n["device.html.publish"]}}</button>
										</span>
									</div>

							</div>
						</div>

					</div>
					<!-- /.card-body -->
			</div>
		</div>
	</section>
</div>

<script>
    var app = new Vue({
        el: '#app',
		data () {
			return {
				i18n:{},
				activeMenu:'camera',
				menus:[{
					name:'index',
					url:'/admin/device/index',
					icon:'fas fa-warehouse',
					title:'系统信息'
				},{
					name:'config',
					url:'/admin/device/config',
					icon:'fas fa-cogs',
					title:'设置'
				}],
				deviceUrl: "http://localhost:8888/station/device/code",
				deviceCode: "1231232",
				stationCode: "",
				localIP: "127.0.0.1",
				hostIP: "127.0.0.1",
				visible: false,
				mode: "simulator",
				properties:{
					"hostIP": "172.31.214.50",
					"warehouseId": 1,
					"devicePtlEnabled": true,
					"devicePtlImpl": "DefaultLightDevice",
					"devicePtlQuantity": 100,
					"devicePtlIP": "127.0.0.1",
					"devicePtlPort": 5003,
					"devicePtlControlID": 1,

					"deviceSlantEnabled": true,
					"deviceSlantIP": "192.168.2.111",
					"deviceSlantPort": 2200,

					"deviceStripEnabled": true,
					"deviceStripIP": "10.0.50.100",
					"deviceStripPort": 4660,

					"deviceCameraEnabled": true,
					"deviceCameraModel": "TCP",
					"deviceCameraDirection": "inner",
					"deviceCameraScanBeforeEnter": false,
					"deviceCameraConnections": [
						{
							"station": "Station_1",
							"point": "187",
							"ip": "127.0.0.1",
							"port": 0
						},
						{
							"station": "Station_1",
							"point": "188",
							"ip": "172.31.214.50",
							"port": 0
						}
					],
					"localIP": "172.31.245.55"
				}
			}
		},
		mounted() {
			window.app = this;
			// 界面初始化信息
			this.getI18NResource();
			this.getMenus(this.activeMenu);
			// 界面数据初始化
			this.init();
		},
		methods: {
			init(){
				// 加载系统配置信息
				this.getDeviceProperties();
			},
			getI18NResource(){
				axios.get('/admin/i18n/mappings/default')
						.then(response => {
							let result = response.data
							this.i18n = result.data;
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			getMenus(activeMenu){
				axios.get('/admin/device/menus')
						.then(response => {
							if(!response.data.success){throw response.data.message;}
							let result = response.data
							this.menus = result.data;
							this.$nextTick(() => {
								this.$refs.menu.updateActiveName(activeMenu);
							});
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			reload(){
				window.location.reload();
			},
			refreshData() {

			},
			getDeviceProperties(){
				axios.get('/station/device/properties/get')
						.then(response => {
							let result = response.data
							this.properties = result.data;
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			mockReport(config){
				let message = config.message;
				if(message === null || message === undefined || (typeof message === 'string' && message.trim() === "")){
					this.$Message.error(this.i18n["device.html.parameter_should_not_empty"]);
					return;
				}
				axios.post('/admin/device/camera/mock/report',config)
						.then(response => {
							this.$Message.success(this.i18n["device.error.SUCCESS"]);
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			}
		}
	});
	//app.use(ViewUIPlus);
	//app.mount("#app");
	function refreshData() {
		window.app.refreshData();
	}
</script>
</body>
</html>